<template>
    <s-layout id="layout" :title="'印鉴密钥申请'" navbar="normal" leftIconColor="#ffffff" :autoBack="true"
        :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false'
        :titleStyle="{ color: '#ffffff', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="container"
            :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <u--form :labelStyle="labelStyle" labelPosition="left" :model="FormData" :rules="rules" ref="formRole"
                :borderBottom="false">
                <!-- 申请事由 -->
                <view class="area form_content">
                    <u-form-item :borderBottom="false" required="true" @click="chooseType" :labelWidth="100"
                        label="申请类型：" prop="type" ref="type">
                        <u-input inputAlign="right" disabled="true" v-model="FormData.type" border="none" placeholder="请选择印鉴密钥"
                           ></u-input>
                    </u-form-item>
                    <u-form-item required="true" :borderBottom="false" :labelWidth="100" label="申请事由：" prop="content"
                        ref="content">
                    </u-form-item>
                    <view class="textarea_box">
                        <view class="image">
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/editor.png`" mode="scaleToFill" />
                        </view>
                        <up-textarea height="150" v-model="FormData.content" placeholder="输入内容"></up-textarea>
                    </view>
                </view>
                <!-- 上传图片 -->
                <view class="area form_images">
                    <u-form-item :borderBottom="false" :labelWidth="100" label="上传图片：" prop="images" ref="images">
                    </u-form-item>
                    <view class="upload_box">
                        <u-upload :fileList="state.fileList1" @afterRead="imageUpload" @delete="deletePic" name="10"
                            :multiple="true" :maxCount="10">
                        </u-upload>
                    </view>
                </view>
            </u--form>
        </view>
    </s-layout>
    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="'提交'" />
    </view>
    <!---选择类型-->
    <up-action-sheet :show="showStatus" :actions="showStatusActions" title="请选择状态" @close="showStatus = false"
        @select="statusSelect" :round="18" :closeOnClickAction="true">
    </up-action-sheet>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync()
onLoad(() => {

})
const FormData = reactive({
    type: '',
    content: '',
    images: '',
    typeid: '',
})

// 表单校验
const rules = {
    content: [
        {
            required: true,
            message: '请输入申请事由',
        }
    ],
    type: [
        {
            required: true,
            message: '请选择申请类型',
        }
    ],
}
// 保存提交
const formRole = ref(null)
const submitForm = () => {
    // #ifdef MP
    sheep.$platform.useProvider('wechat').subscribeMessage(['apply_notice','apply_result_notice']);
    // #endif
    uni.$u.throttle(() => {
        let params = {
            type: FormData.typeid,
            images: FormData.images,
            content: FormData.content,
        }
        formRole.value.validate().then(async (res) => {
            const resust = await sheep.$api.common_seal.common_seal_applyAddAPI(params);
            if (resust.code == 1) {
                sheep.$helper.toast(resust.msg);
                setTimeout(() => {
                    sheep.$router.back(true)
                }, 500)
            } else {
                sheep.$helper.toast(resust.msg);
            }
        }).catch((err) => {
            uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 1000
            })
        })
      }, 1000);

}
//申请类型
const chooseType = () => {
    showStatus.value = true
}
const showStatus = ref(false)
const showStatusActions = ref([
    { name: '公章', type: 1 },
    { name: '营业执照', type: 2 },
    { name: 'CA', type: 3 },
])
// 定义方法  状态
function statusSelect(e) {
    FormData.typeid = e.type
    FormData.type = e.name
    showStatus.value = false

}
// 上传图片逻辑
const state = reactive({
    fileList1: []
})
// 删除图片
const deletePic = (event) => {
    state.fileList1.splice(event.index, 1);
};

// 新增图片
const imageUpload = async (event) => {
    let lists = [].concat(event.file);
    let fileListLen = state.fileList1.length;
    lists.map((item) => {
        state.fileList1.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const url = await uploadFilePromise(lists[i].url)
        let item = state.fileList1[fileListLen];
        state.fileList1.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: sheep.$url.cdn(url),
        });
        fileListLen++;
    }
    FormData.images = postData.value.join(',')
    
};
const postData = ref([])
async function uploadFilePromise(tempUrl) {
    let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
    postData.value.push(url);
    return url;
};

</script>

<style lang="scss" scoped>
@import '../compentns/up_sheet.scss';

:deep(.u-form-item__body) {
    width: calc(100% - 10rpx);
    height: 80rpx;
    margin-bottom: 10rpx;
    padding-left: 10rpx;
    border-bottom: 2rpx solid #efefef;
    &:last-child{
        border: none;
    }
}

:deep(.u-textarea.data-v-31706dd7) {
    padding: 0;
}
:deep(.u-input){
    background-color: transparent !important;
}
// uview 内部样式 输入内容右边间距
:deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
    margin-right: 20rpx;
}

// uview 内部样式 label左边间距
:deep(.u-form-item__body__left.data-v-b4fd400b) {
    margin-left: 20rpx;
}

// uview 内部样式 label字体粗细
:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
    font-weight: $uni-font-weight;
}

// uview 内部样式 未输入提示拦截框
:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
    margin-left: 0 !important;
}

// 最大盒子
.container {
    width: 100%;
    background-size: cover;
    /* 或 contain */
}

// 版心
.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
}

// 申请事由盒子
.form_content {
    width: calc(100% - 80rpx);
    padding: 30rpx 20rpx 0 20rpx;
    margin-top: 20rpx;
    // height: 474rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;

    :deep(.u-form-item) {
        &:first-child {
            height: 90rpx !important;
            border-radius: 16rpx;
            margin: 20rpx 0 !important;
            background: #F9FAFF !important;

            .u-form-item__body {
                padding: 0;
            }
        }
    }




    .textarea_box {
        margin-top: 15rpx;
        display: flex;
        padding-bottom: 20rpx;

        .image {
            width: 25rpx;
            height: 26rpx;
            margin-right: 10rpx;
            // margin-top: -3rpx;

            image {
                width: 25rpx;
                height: 26rpx;
            }
        }
    }
}

// 上传图片盒子
.form_images {
    width: calc(100% - 80rpx);
    margin-top: 20rpx;
    // height: 330rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;
    padding: 0 20rpx;

    .upload_box {
        margin-top: 15rpx;
    }
}
:deep(.u-input__content__field-wrapper__field){
    background-color: transparent !important;
    width: 100% !important;
}
</style>
